<template>
    <div class="page-home">
        <!-- 横幅 -->
        <div class="banner-section">
            <Banner banner="banner" />
            <home-banner-one />
        </div>

        <!-- 文章模块 -->
        <div class="article-section el-bkgd-white el-mx-1200">
            <article-list :list="articles.list" />
            <!-- 表格分页 -->
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="articles.currentPage"
                :page-sizes="articles.pageSizes"
                :page-size="articles.pageSize"
                :layout="articles.layout"
                :total="articles.total"
            >
            </el-pagination>
        </div>

        <!-- 横幅 -->
        <div class="banner-section">
            <Banner banner="banner2" />
            <home-banner-two />
        </div>
    </div>
</template>

<script>
import { index as Api } from "../api";

export default {
    name: "home",
    async asyncData({ app: { $axios, $localConfig }, query }) {
        let params = {
            support: 1,
            per_page: $localConfig.pagination.pageSize,
            page: Number(
                typeof query.page == "undefined"
                    ? $localConfig.pagination.currentPage
                    : query.page
            ),
        };

        const [article] = await Promise.all([
            $axios.$get(Api.getArticleList, { params }),
        ]);

        return {
            articles: {
                list: article.data.list,
                currentPage: params.page, // 默认页
                pageSize: params.per_page, // 每页多少条
                pageSizes: $localConfig.pagination.pageSizes, // 每页显示个数下拉选择器的选项设置
                layout: $localConfig.pagination.layout, // 组件布局，子组件名用逗号分隔
                total: article.data.total, // 总条数
            },
        };
    },

    methods: {
        handleCurrentChange(val) {
            this.$router.push({
                path: "/",
                query: {
                    page: val,
                },
            });
        },
    },
    // 监听路由
    watchQuery: true,
};
</script>

<style lang="less" scoped>
/deep/.article-item {
    &:nth-child(3n),
    &:nth-child(3n-1) {
        flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        width: 38%;

        .article-cover {
            img {
                border-bottom-left-radius: 0;
                border-top-right-radius: 8px;
            }
        }

        .article-content {
            width: 100%;

            .article-content_hd {
                h4 {
                    max-width: 150px;
                }
            }
        }

        @media (max-width: 768px) {
            width: 80%;
        }
    }
}
</style>
